/**
 * 菜单组件的类型定义
 */
import type { TuiIconProps } from '../icon/types';
import type { Ref } from 'vue';

/**
 * 超时引用对象类型定义
 */
export interface TimeoutRefs {
  [key: string]: NodeJS.Timeout | undefined;
}

/**
 * 菜单项数据结构类型定义
 */
export interface TuiMenuItemData {
  /** 唯一标识名称 */
  name: string;

  /** 菜单项标题 */
  title?: string;

  /** 路由路径 */
  path?: string;

  /** 图标配置，可以是图标名称或完整的图标属性对象 */
  icon?: string | TuiIconProps;

  /** 子菜单 */
  children?: TuiMenuItemData[];

  /** 是否禁用 */
  disabled?: boolean;

  /** 菜单项类型，默认值 `item` */
  type?: 'item' | 'group';
}

/**
 * 菜单组件的属性类型定义
 * @property {string} mode - 菜单展示模式，可选值为'horizontal'或'vertical'，默认值为'vertical'
 * @property {boolean} verticalCollapse - 是否水平折叠收起菜单（仅在 `mode` 为 `vertical` 时可用），默认值 `false`
 * @property {boolean} horizontalEllipsis - 是否省略多余的子项（仅在 `mode` 为 `horizontal` 时生效），默认值 `true`
 * @property {string} menuTrigger - 子菜单打开的触发方式，可选值为'hover'、'click'或'contextmenu'，默认值为'hover'
 * @property {string} defaultActive - 默认激活的菜单项的索引，默认值为空字符串
 * @property {string[]} defaultOpeneds - 默认打开的子菜单的索引数组，默认值为空数组
 * @property {boolean} uniqueOpened - 是否只保持一个子菜单的展开，默认值 `false`
 * @property {boolean} collapseTransition - 是否开启折叠动画，默认值 `true`
 * @property {number} popperOffset - 弹出层的偏移量，默认值 `6`
 * @property {number} popperOffsetX - 弹出层的水平偏移量，优先级高于 popperOffset，默认值 undefined，此时会被设置为 popperOffset
 * @property {number} popperOffsetY - 弹出层的垂直偏移量，优先级高于 popperOffset，默认值 undefined，此时会被设置为 popperOffset
 * @property {number} showTimeout - 菜单出现前的延迟（毫秒），默认值 `300`
 * @property {number} hideTimeout - 菜单消失前的延迟（毫秒），默认值 `300`
 * @property {boolean} closeOnClickOutside - 单击外部时是否折叠菜单，默认值 `false`
 * @property {string} popperClass - 为弹出层添加类名，默认值为空字符串
 * @property {boolean} persistent - 当菜单处于非活动状态且 persistent 为 false 时，下拉菜单将被销毁，默认值 `true`
 * @property {string} backgroundColor - 菜单的背景颜色，默认值 `var(--tui-color-white, #ffffff)`
 * @property {string} hoverBackgroundColor - 鼠标悬停时的背景颜色，默认值 `var(--tui-color-hover, rgba(0, 0, 0, 0.02))`
 * @property {Record<string, string>} customStyle - 自定义样式对象，默认值为空对象
 */
export interface TuiMenuProps {

  /** 垂直菜单宽度，默认值 `200px` */
  verticalWidth?: string | number;

  /** 垂直菜单折叠宽度，默认值 `56px` */
  verticalCollapseWidth?: string | number;

  /** 水平菜单高度，默认值 `60px` */
  horizontalHeight?: string | number;

  /** 菜单展示模式，默认值 `vertical` */
  mode?: 'vertical' | 'horizontal';

  /** 是否水平折叠收起菜单（仅在 `mode` 为 `vertical` 时可用），默认值 `false` */
  verticalCollapse?: boolean;

  /** 是否省略多余的子项（仅在 `mode` 为 `horizontal` 时生效），默认值 `true` */
  horizontalEllipsis?: boolean;

  /** 子菜单打开的触发方式 */
  menuTrigger?: 'hover' | 'click' | 'contextmenu';

  /** 默认激活的菜单项的索引 */
  defaultActive?: string;

  /** 默认打开的子菜单的索引数组 */
  defaultOpeneds?: string[];

  /** 是否只保持一个子菜单的展开，默认值 `false` */
  uniqueOpened?: boolean;

  /** 是否开启折叠动画，默认值 `true` */
  collapseTransition?: boolean;

  /** 弹出层的偏移量，默认值 `6` */
  popperOffset?: number | string;

  /** 弹出层的水平偏移量，优先级高于 popperOffset，默认值 undefined，此时会被设置为 popperOffset */
  popperOffsetX?: number | string;

  /** 弹出层的垂直偏移量，优先级高于 popperOffset，默认值 undefined，此时会被设置为 popperOffset */
  popperOffsetY?: number | string;

  /** 菜单出现前的延迟（毫秒），默认值 `300` */
  showTimeout?: number;

  /** 菜单消失前的延迟（毫秒），默认值 `300` */
  hideTimeout?: number;

  /** 单击外部时是否折叠菜单，默认值 `false` */
  closeOnClickOutside?: boolean;

  /** 为弹出层添加类名 */
  popperClass?: string;

  /** 当菜单处于非活动状态且 persistent 为 false 时，下拉菜单将被销毁，默认值 `true` */
  persistent?: boolean;

  /** 菜单的背景颜色，默认值 `var(--tui-color-white, #ffffff)` */
  backgroundColor?: string;

  /** 菜单的文字颜色，默认值 `var(--tui-text-color-primary, #303133)` */
  textColor?: string;

  /** 当前激活菜单的文字颜色，默认值 `var(--tui-text-color-active, #409eff)` */
  activeTextColor?: string;

  /** 菜单项悬停时的背景颜色，默认值 `rgba(0, 0, 0, 0.02)` */
  hoverBackgroundColor?: string;

  /** 自定义样式对象 */
  customStyle?: Record<string, string>;

  /**
   * 是否为路由菜单
   * @default false
   */
  isRouter?: boolean;
}

/**
 * 子菜单组件的属性类型定义
 */
export interface TuiSubMenuProps {

  /**
   * 菜单出现前的延迟（毫秒）
   * @default 300
   */
  showTimeout?: number;

  /**
   * 菜单消失前的延迟（毫秒）
   * @default 300
   */
  hideTimeout?: number;

  /**
   * 为弹出层添加类名
   */
  popperClass?: string;

  /**
   * Teleport目标，指定子菜单渲染的位置，设置为false时表示不使用teleport
   * @default 'body'
   */
  teleportTarget?: string | HTMLElement | false;

  /**
   * 唯一标识
   */
  index: string;

  /**
   * 图标配置，可以是图标名称或完整的图标属性对象
   */
  icon?: string | TuiIconProps;

  /**
   * 是否禁用
   * @default false
   */
  disabled?: boolean;

  /**
   * 展开状态的图标配置
   */
  expandIcon?: {
    /** 关闭状态的图标 */
    close?: string | TuiIconProps;
    /** 打开状态的图标 */
    open?: string | TuiIconProps;
  };

  /**
   * 折叠状态的图标配置
   */
  collapseIcon?: {
    /** 关闭状态的图标 */
    close?: string | TuiIconProps;
    /** 打开状态的图标 */
    open?: string | TuiIconProps;
  };
}

/**
 * 菜单项组件的属性类型定义
 */
export interface TuiMenuItemProps {
  /**
   * 唯一标识
   */
  index: string;

  /**
   * Vue Route 路由位置参数
   */
  route?: string | object;

  /**
   * 是否禁用
   * @default false
   */
  disabled?: boolean;

  /**
   * 是否显示分割线
   * @default false
   */
  divided?: boolean;

  /**
   * 图标配置，可以是图标名称或完整的图标属性对象
   */
  icon?: string | TuiIconProps;

  /**
   * 菜单项标题
   */
  title?: string;
}

/**
 * 菜单分组组件的属性类型定义
 * 注意：菜单项的分组功能应通过 TuiMenuItemGroup 组件实现，而非 TuiMenuItem 的 type 属性
 */
export interface TuiMenuItemGroupProps {
  /**
   * 组标题
   */
  title?: string;
}

/**
 * 菜单上下文接口
 * 用于在菜单组件树中传递共享状态和方法
 */
export interface TuiMenuContext {
  /**
   * 菜单组件属性
   */
  props: TuiMenuProps;

  /**
   * 菜单触发方式
   */
  menuTrigger: Ref<'hover' | 'click' | 'contextmenu'>;

  /**
   * 菜单层级
   */
  menuLevel: Ref<number>;

  /**
   * 当前激活的菜单项索引
   */
  activeIndex: Ref<string>;

  /**
   * 当前打开的菜单项索引数组
   */
  openedMenus: Ref<string[]>;

  /**
   * 当前内部索引
   */
  innerIndex: Ref<string>;

  /**
   * 父菜单索引数组
   */
  parentMenuIndexes: Ref<string[]>;

  /**
   * 菜单事件处理器
   */
  handlers: {
    /**
     * 处理菜单项选中事件
     * @param index 菜单项索引
     */
    handleSelect: (index: string) => void;

    /**
     * 处理子菜单切换事件
     * @param index 子菜单索引
     * @param parentMenuIndexes 父菜单索引数组
     */
    handleToggleSubMenu: (index: string, parentMenuIndexes?: string[]) => void;
  };

  /**
   * 菜单样式管理
   */
  styles: {
    /**
     * CSS变量对象
     */
    cssVars: Ref<Record<string, string>>;

    /**
     * 应用CSS变量到指定元素
     * @param element 目标DOM元素
     */
    applyCssVars: (element: HTMLElement | null) => void;

    /**
     * 获取CSS变量对象
     * @returns CSS变量对象
     */
    getCssVarsObject: () => Record<string, string>;
  };
}